<template>
    <el-row :gutter="gutter" class="upload-info-container"> <!--16:9添加cover-map-->
        <!--已经添加的，可修改、移动、删除-->
        <el-col v-for="(item, index) in localValue" :key="index + item[imgName]" :span="span">
            <div class="layout-block">
                <div class="upload-btn has-img">
                    <div class="uploaded-tools">
                        <i class="tools-icon el-icon-edit-outline" @click="imgEdit(item, index)" />
                        <i class="tools-icon el-icon-delete" @click.stop="imgDelete(index)" />
                        <div class="tools-move">
                            <i class="tools-icon el-icon-arrow-left" @click.stop="imgMove(index,-1)" />
                            <i class="tools-icon el-icon-arrow-right" @click.stop="imgMove(index,1)" />
                        </div>
                    </div>
                    <video v-if="options.media === 'video'" v-show="item[imgName]" :src="item[imgName]" controls class="uploaded-single" />
                    <img v-else v-show="item[imgName]" :src="item[imgName]" alt="" class="uploaded-single">
                </div>
            </div>
        </el-col>
        <!--添加模板-->
        <el-col :span="span">
            <div class="layout-block">
                <div class="upload-btn" @click="openDialog">
                    <i class="el-icon-plus" />
                </div>
            </div>
        </el-col>
        <!--弹窗-->
        <el-dialog title="上传图片" custom-class="custom-dialog-form" :visible.sync="uploadDialogShow" width="70vw" :close-on-click-modal="false">
            <el-form ref="rePwdForm" :rules="uploadDialogRules" :model="temp" label-position="top">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="图片上传" prop="img">
                            <UploadMedia v-model="temp[imgName]" :gutter="options.gutter" :span="options.span" :media="media" :size="size" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <el-col v-for="item in fields" :key="item.name" :span="item.span || 24">
                            <el-form-item :label="item.tips" :prop="item.name">
                                <el-input v-if="!item.type" v-model="temp[item.name]" :placeholder="item.tips" />
                                <el-input v-if="item.type === 'textarea'" v-model="temp[item.name]" :placeholder="item.tips" type="textarea" :rows="5" />
                                <el-date-picker v-if="item.type === 'date'" v-model="temp[item.name]" type="date" :placeholder="item.tips" value-format="yyyy-MM-dd" />
                                <el-select v-if="item.type === 'select'" v-model="temp[item.name]" :placeholder="item.tips" filterable collapse-tags>
                                    <el-option v-for="child in item.options" :key="child[item.key||'value']" :label="child.label" :value="child[item.value||'value']" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-row>
                <div class="el-message-box__btns">
                    <button type="button" class="el-button el-button--default" @click="uploadDialogCancel"><span>取消</span></button>
                    <button type="button" class="el-button el-button--default el-button--primary" @click="uploadDialogSave()"><span>保存</span></button>
                </div>
            </el-form>
        </el-dialog>
    </el-row>
</template>

<script>
import UploadMedia from '@/components/UploadMedia'
import { cloneDeep } from 'lodash'
import { arrMove } from '@/utils'
export default {
    name: 'UploadMediaInfoList',
    components: { UploadMedia },
    props: {
        value: {
            type: Array,
            default() {
                return [] // v-model绑定值，默认为数组格式
            }
        },
        gutter: {
            type: Number,
            default: 20 // 间隔 px
        },
        span: {
            type: Number,
            default: 24 // 分栏 1/24
        },
        size: {
            type: String,
            default: ''
        },
        media: {
            type: String,
            default: 'image'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        imgName: {
            type: String,
            default: 'imgField' // 默认img的字段名
        },
        fields: {
            type: Array,
            default() {
                return [] // name:字段名，tips:提示，type:表单类型-input|select|date，options:select类型下的选项数组
            }
        },
        options: {
            type: Object,
            default() {
                return {
                    gutter: 20, // 间隔：px
                    span: 24 // 分栏 * 1/24
                }
            }
        },
        extra: {
            type: Object,
            default: function() {
                return {} // 额外参数，拼接在新数据后面
            }
        }
    },
    data: function() {
        return {
            localValue: [],
            temp: {},
            uploadDialogShow: false
        }
    },
    computed: {
        uploadDialogRules() {
            return {}
        }
    },
    watch: {
        value(val) {
            this.localValue = this.value ? this.value : []
        },
        localValue(val) {
            this.$emit('input', val)
        }
    },
    created() {
        this.localValue = this.value ? this.value : []
    },
    methods: {
        openDialog(item, index) {
            this.temp = {}
            this.uploadDialogShow = true
        },
        imgEdit(item, index) {
            this.temp = cloneDeep({ ...item, order: index })
            this.uploadDialogShow = true
        },
        imgDelete(index) {
            this.localValue.splice(index, 1)
        },
        imgMove(index, step) {
            this.localValue = arrMove(this.localValue, index, step)
        },
        uploadDialogCancel() {
            this.uploadDialogShow = false
        },
        uploadDialogSave() {
            const NEW_INFO = { ...this.extra, ...this.temp }
            console.log(NEW_INFO);
            if ('order' in NEW_INFO) {
                const defaultData = cloneDeep(this.localValue)
                const INDEX = NEW_INFO.order
                defaultData[INDEX] = cloneDeep(NEW_INFO)
                this.localValue = defaultData
            } else {
                this.localValue.push(NEW_INFO)
            }
            this.temp = {}
            this.uploadDialogShow = false
        }
    }
}
</script>

<style lang="scss" scoped>
@import "src/styles/variables";
.upload-info-container {
    .layout-block {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
    }

    .upload-btn {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px dashed #d9d9d9;
        background-color: #fbfdff;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        transition: .3s;

        .el-icon-plus {
            position: relative;
            font-size: 28px;
            color: #8c939d;
            cursor: pointer;
            transition: .3s;
            z-index: 5;
        }

        .uploaded-single{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            z-index: 1;
            transition: .3s;
        }

        .uploaded-tools {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            background-color: rgba(0, 0, 0, .5);
            z-index: 5;
            opacity: 0;
            visibility: hidden;
            transition: .3s;

            .tools-icon {
                position: relative;
                display: block;
                font-size: 28px;
                padding: 2px;
                opacity: 0.8;
                cursor: pointer;
                text-shadow: 0 0 2px #ccc;
                transition: .3s;

                + .tools-icon {
                    margin-left: 8px;
                }

                &:hover {
                    opacity: 1;
                    color: $subColor;
                }
            }

            .tools-move {
                position: absolute;
                bottom: 4px;
                left: 4px;
                display: flex;
                align-items: center;
            }
        }

        &:hover {
            background-color: #e6ebf1;
            border-color: #1d38FF;
            i{
                color: #1d38FF;
            }
            .uploaded-tools {
                opacity: 1;
                visibility: visible;
            }
        }
        &.has-img {
            cursor: default;
            i {
                color: #fff;
                opacity: 0;
                filter: drop-shadow(0px 0px 4px black);
                transition: .3s;
            }

            &:hover {
                i {
                    opacity: 1;
                }
            }
        }
    }
}
</style>
